<template>
	<view class="custom_page">
		<view class="item">
			<view class="item_title">联系人</view>
			<u-input class="ipt" v-model="name" placeholder="请输入联系人姓名" placeholder-class="uinpt"></u-input>
			<view class="shibie" @click="shibie_show=!shibie_show">识别</view>
		</view>
		<view class="item">
			<view class="item_title">手机号</view>
			<u-input class="ipt" v-model="mobile" placeholder="请输入联系人手机号" placeholder-class="uinpt"></u-input>
		</view>
		<view class="item" style="justify-content: space-between;">
			<view class="item_title">联系地址</view>
			<view class="address">{{province}}{{city}}{{area}}</view>
			<u-icon name="arrow-right" @click="show_dizhi=!show_dizhi"></u-icon>
		</view>
		<view class="item">
			<view class="item_title">详细地址</view>
			<u-input class="ipt" v-model="address" placeholder="请输入详细地址" placeholder-class="uinpt"></u-input>
		</view>
		<view class="item" style="justify-content: space-between;">
			<view class="item_title">期望上门时间</view>
			<view class="address">{{time}}</view>
			<u-icon name="arrow-right" @click="show_time=!show_time"></u-icon>
		</view>
		<view class="btn" @click="confirmOrder()">确定下单</view>
		<!-- <auto-parse-address boxClass="c-box" @result="result"></auto-parse-address> -->
		<u-popup :show="shibie_show" mode="center" :round="12" @close="close" closeOnClickOverlay>
			<viwe class="shibie_box">
				<view class="pop_title">智能识别</view>
				<auto-parse-address boxClass="c-box" @result="result">
				</auto-parse-address>
			</viwe>
		</u-popup>
		<!-- 地址选择 -->
		<u-picker :show="show_dizhi" closeOnClickOverlay @close="close" :columns="arr" keyName="label"
			@change="changeHandler" @confirm="confirm"></u-picker>
		<!-- 时间 -->
		<u-datetime-picker :show="show_time" v-model="time_value" mode="datetime" closeOnClickOverlay
			@close="close" @confirm="confirmTime" @cancel="close"></u-datetime-picker>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import { mapState } from 'vuex'
	import {
		list
	} from '../../common/js/allcity.js'
	import { dateformat} from "../../common/js/utils.js"
	export default {
		data() {
			return {
				name: '',
				shibie_show: false,
				show_time: false,
				list: list,
				time_value:'',
				show_dizhi: false,
				arr: [
					[],
					[],
					[],
				],
				columns: [],
				area1: [],
				province: '',
				city: '',
				area: '',
				address: '',
				mobile: '',
				time:'',
				type:0,
			}
		},
		onLoad(e) {
			this.time_value=new Date().getTime()
			this.getArea()
			this.type=e.type
		},
		methods: {
			close() {
				this.shibie_show = false
				this.show_dizhi = false
				this.show_time = false
			},
			result(e) {
				this.province=e.province
				this.city=e.city
				this.area=e.area
				this.address=e.name
				this.name=e.detail
				this.mobile=e.phone
				this.shibie_show=false
			},
			changeHandler(e) {
				console.log(e);
				let idx = e.indexs[0]
				let idx1 = e.indexs[1]
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columns[index])
					picker.setColumnValues(2, this.area1[index])
				}
				if (columnIndex === 1) {
					// picker为选择器this实例，变化第二列对应的选项
					// console.log(this.area1);
					// console.log(this.columns);
					picker.setColumnValues(2, this.list[idx].city[idx1].districtAndCounty)
				}
			},
			confirm(e) {
				console.log(e);
				this.province = e.value[0]
				this.city = e.value[1]
				this.area = e.value[2]
				this.show_dizhi = false
			},
			getArea() {
				this.list.forEach((item, index) => {
					let a = []
					let b = []
					this.arr[0].push(item.provice)
					item.city.forEach((item, index) => {
						a.push(item.name)
						item.districtAndCounty.forEach(item => {
							b.push(item)
						})
					})
					this.columns.push(a)
					this.area1.push(b)
				})
				this.arr[1] = this.columns[0]
				this.arr[2] = this.list[0].city[0].districtAndCounty
			},
		    confirmTime(e){
				console.log(e);
				this.time = dateformat(e.value,'Y-M-D-H-I')
				console.log(this.time);
				this.show_time=false
			} ,
		    confirmOrder(){
				let p = {
					name:this.name,
					mobile:this.mobile,
					province:this.province,
					city:this.city,
					address:this.address,
					servetime:this.time,
					area:this.area,
				}
				console.log(p);
				store.commit('changedata1',p)
				uni.navigateTo({
					url:"/pages/index/confirmorder?type=" + this.type
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.custom_page {
		width: 100%;
		height: 100vh;
		background-color: #F9F9F9;
		padding-top: 20rpx;

		.item {
			width: 100%;
			height: 104rpx;
			padding: 32rpx;
			display: flex;
			background-color: #FFFFFF;
			border-bottom: 2rpx #FAFAFA solid;

			.item_title {
				width: 170rpx;
				// max-width: 170rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}

			.address {
				width: 426rpx;
				text-align: right;
				height: 40rpx;
			}

			.ipt {
				height: 40rpx;
				border: none;
			}

			/deep/.uinpt {
				width: 300rpx;
			}

			.shibie {
				width: 72rpx;
				height: 44rpx;
				background-color: #00CC7B;
				border-radius: 8rpx;
				text-align: center;
				line-height: 44rpx;
				color: #FFFFFF;
				font-size: 20rpx;
			}
		}

		.btn {
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #00CC7B;
			border-radius: 8rpx;
			color: #FFFFFF;
			margin: auto;
			font-size: 32rpx;
			margin-top: 730rpx;
		}
	}

	.shibie_box {
		width: 630rpx;
		height: 484rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx;

		.pop_title {
			width: 100%;
			height: 40rpx;
			color: #333333;
			text-align: center;
			font-size: 28rpx;
		}

		.c-box {
			width: 100%;
			height: auto;
		}
	}
</style>